<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%;">
    <el-col :span="20">
      <span>{{ nodeData.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ nodeData.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown>
            <span @click.stop>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="addclass">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!nodeData.root" @click.native="edit">编辑部分</el-dropdown-item>
              <el-dropdown-item v-if="!nodeData.root" @click.native="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
    <!-- 添加部门的组件 -->
  </el-row>
</template>
<script>
// 调用删除的api接口
import { reqDelDepartments } from '../../api/departments'
export default {
  name: 'TreeTools',
  components: {
    // 导入添加部门的组件
  },
  props: {
    nodeData: {
      type: Object,
      required: true
    }
  },
  methods: {
    addclass () {
      // 设置添加按钮的事件监听 携带点击内容的id 提交给父组件
      this.$emit('add-dept', this.nodeData.id)
    },
    edit () {
      // 设置添加按钮的事件监听 携带点击内容的id 提交给父组件
      this.$emit('edit-dept', this.nodeData)
    },
    del () {
      // 点击退出时需要提示是否退出 (饿了么ui 确认消息提供)
      this.$confirm('确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => { // 如果要删除 调用删除接口 (添加同步async)
        const ret = await reqDelDepartments(this.nodeData.id) // 需要携带 子组件传来的id值 来进行删除
        console.log(ret)
        if (ret.code === 10000) {
          // 如果删除成功 向子组件传递数据 告诉用户删除成功 把页面进行刷新
          this.$emit('on-success')
          // 调用饿了么ui提供的提示插件 告诉用户删除成功
          this.$message({
            showClose: true,
            message: '删除部门成功',
            type: 'success'
          })
        } else {
          if (ret.code === 99999) {
            // 如果是系统默认设置 不可以删除 进行提示
            this.$message.error('默认项不可以删除')
          } else {
            // 其他原因提示用户无法删除
            this.$message.error('删除失败')
          }
        }
      }).catch(() => {
        // 如果用户取消删除 什么也不做
      })
    }
  }

}
</script>
